<template>
	<div id="queryPost">

		<h3 class="text-info">浏览帖子界面</h3>

		<div id="stick">
			<div v-for="stick in sticks" :key="stick.index">
				<div class="card cardSize fl">
					<div class="card-header text-over">标题：
						<router-link :to="{path: '/main/comment',query:{id: stick.id}}">{{stick.postTitle}} &nbsp;></router-link>
					</div>
					<div class="card-body word-wrap">内容：
						<span v-html="stick.postContent"></span></div>
					<div class="card-footer text-over">发帖人：
						<span>{{stick.name}}</span> 发帖时间：
						<span>{{stick.postTime | timef}}</span>
					</div>
				</div>
				<div>
					<!-- 取消置顶-->
					<button id="deleteStick" @click="deleteStick(stick.id)" v-if="level != 0 && flag == true" class="btn btn-info">取消置顶</button>
				</div>
			</div>
		</div>

		<hr />
		<div v-for="post in posts" :key="post.id">
			<div class="card cardSize fl">
				<div class="card-header text-over">标题：
					<router-link :to="{path: '/main/comment',query:{id: post.id}}">{{post.postTitle}} &nbsp;></router-link>
				</div>
				<div class="card-body word-wrap">内容：
					<span v-html="post.postContent"></span></div>
				<div class="card-footer text-over">发帖人：
					<span>{{post.name}}</span> 发帖时间：
					<span>{{post.postTime | timef}}</span>
				</div>
			</div>
			<div v-if=" level != 0 & flag == true">
				<!-- 删除 或置顶-->
				<button id="stickPost" @click="stickPost(post.id)"  class="btn btn-info">置顶</button>
				<button id="deletePost" @click="deletePost(post.id)" class="btn btn-info">删除</button>
			</div>

		</div>
		<v-pagination :total="total" :current-page='current' :display='display' @pagechange="pagechange" style="clear: both;"></v-pagination>

		<div>

		</div>
	</div>
</template>

<script>

	import pagination from '../pagination.vue'
	export default {
		data() {
			return {
				posts: {},
				forumId: '',
				sticks: {},
				postsAll: {},
				flag:false, // 判断是否有权置顶删除帖子
				level: 0,
				total: 0, // 记录总条数
				display: 3, // 每页显示条数
				current: 1, // 当前的页数
			}
		},
		created() {
			this.forumId = this.$route.query.id;

			var flag =this.$route.query.flag;
			if(flag == true){
				this.flag = flag
			}
			if(this.$store.state.user != null) {
				this.level = this.$store.state.user[0].level;
				if(this.$store.state.user[0].level == 2){
					this.flag = true;
				}
			} else {
				this.level = 0;
			}

			this.getPosts();
		},
		methods: {
			getPosts() {
				this.$http.get('/api/queryPost', {
					params: {
						id: this.forumId
					}
				}).then(data => {
					if(data.status == 200) {
						this.total = data.body.length;
						this.postsAll = data.body;
						this.current = 1;
						var start = 0;
						var end = this.display;
						if(this.total >= end) {
							this.posts = this.postsAll.slice(start, end);
						} else {
							this.posts = this.postsAll.slice(start, this.total);
						}
					}
				}, err => {
					console.log(err);
				})
				this.getStick();
			},
			getStick() {
				this.$http.get('/api/queryStick', {
					params: {
						id: this.forumId
					}
				}).then(data => {
					if(data.status == 200) {

						this.sticks = data.body;

					}
				}, err => {
					console.log(err);
				})
			},
			deletePost(postId) {
				console.log(postId)
				var sure = confirm("确定删除？");
				if(sure == true) {
					this.$http.get('/api/deletePost', {
						params: {
							id: postId
						}
					}).then(data => {
						if(data.status == 200) {
							console.log("删除成功");
						}
					}, err => {
						console.log(err);
					})
					this.getPosts();
				}

			},
			stickPost(postId) {
				console.log(postId)

				this.$http.get('/api/stickPost', {
					params: {
						id: postId
					}
				}).then(data => {

				}, err => {
					console.log(err);
				})
				this.getPosts();

			},
			deleteStick(postId) {
				console.log(postId)
				this.$http.get('/api/deleteStick', {
					params: {
						id: postId
					}
				}).then(data => {

				}, err => {
					console.log(err);
				})
				this.getPosts();

			},
			pagechange: function(currentPage) {
				this.current = currentPage;
				// ajax请求, 向后台发送 currentPage, 来获取对应的数据
				var start = (this.current - 1) * this.display;
				var end = this.current * this.display;
				if(this.total >= end) {
					this.posts = this.postsAll.slice(start, end);
				} else {
					this.posts = this.postsAll.slice(start, this.total);
				}
			}

		},
		components: {
			'v-pagination': pagination,
		}

	}
</script>

<style scoped lang="less">
	#stick {
		max-height: 300px;
		overflow: auto;
	}
	
	#queryPost {
		width: 700px;
		margin: 0 auto;
	}
	
	button {
		float: left;
		margin-top: 75px;
		margin-left: 5px;
	}
</style>